//index.vue
<template>
  <div id="pageTable">
    <h1>列表组件</h1>
    <span>name</span> <input type="text" v-model="newPeison.name">
    <span>age</span> <input type="text" v-model="newPeison.age">
    <select v-model="newPeison.sex">
          <option value="Male">Male</option>
          <option value="Female">Female</option>
    </select>
    <button @click="createPerson">新加一个人</button>
    <button @click="createPerson">Create</button>
    <qui-table :msg=msg v-on:deletePerson=deletePerson></qui-table>
    <qui-page :pageCount=pageCount> </qui-page>
  </div>
</template>

<script>
  import quiTable from '../components/quiTable.vue'
  import quiPage from '../components/quiPage.vue'
  
  var penple = [{
          name: 'Jack',
          age: 30,
          sex: 'Male'
        }, {
          name: 'Bill',
          age: 26,
          sex: 'Male'
        }, {
          name: 'Tracy',
          age: 22,
          sex: 'Female'
        }, {
          name: 'Chris',
          age: 36,
          sex: 'Male'
  }];
  export default {
    name: 'pageTable',
    components: {
      'qui-page': quiPage,
      'qui-table':quiTable
    },
    data:function(){
      return {
        msg:penple,
        pageCount:10,
        newPeison: {
          name: '',
          age: 0,
          sex: 'Male'
        }
      }
    }, 
    methods: {
      btnClickEvent: function(){
        alert('你点击了组件的click:btnClickEvent');
      },
      doTheClick: function(){
        alert('我是原生的click');
      },
      createPerson:function(){
        this.msg.push(this.newPeison);
        this.newPeison = {name: '', age: 0, sex: 'Male'}
      },
      deletePerson:function(index){
        this.msg.splice(index,1);
        if(this.msg.length<1){
            this.msg=[]
        }
      }
    }
  }
</script>

<style scoped>
  .mod-module.mod-btn .bar-flex{
    display: -webkit-flex; /* Safari */
    display: flex;
  }
  .mod-module.mod-btn .btn-bar{
    padding:5px 12px;
    font-size: 0;
    text-align: center;
  }
  .mod-module.mod-btn .text-r{
    text-align: right;
  }

</style>
